<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>接口文档</title>
    <link rel="stylesheet" href="${contextPath}/static/bootstrap-3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/zTree_v3-master/css/metroStyle/metroStyle.css" type="text/css"/>
    <!--[if !IE]> -->
    <script src="${contextPath}/static/ace/assets/js/jquery-2.1.4.min.js"></script>
    <!-- <![endif]-->

    <!--[if IE]>
    <script src="${contextPath}/static/ace/assets/js/jquery-1.11.3.min.js"></script>
    <![endif]-->
    <script src="${contextPath}/static/zTree_v3-master/js/jquery.ztree.core.min.js"></script>
    <script src="${contextPath}/static/zTree_v3-master/js/jquery.ztree.excheck.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <h3 class="page-header">接口文档
            <small><a href="${contextPath}/api/doc/standard" target="_blank">接口规范</a></small>
            <small>server地址：${server}</small>
        </h3>
        <div class="col-xs-3">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
        <div class="col-xs-9" id="app">
            <div v-if="api.name">
                <div>接口名称：{{api.name}}</div>
                <div>接口地址：${server}{{api.address}}</div>
                <div>请求方式：{{api.requestType}}</div>
                <div>返回格式：{{api.returnType}}</div>
                <div>请求参数：</div>
                <div>
                    <table class="table">
                        <thead>
                        <tr>
                            <th>字段</th>
                            <th>类型</th>
                            <th>必填</th>
                            <th>说明</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="param in api.apiReqParameters">
                            <td>{{param.name}}</td>
                            <td>{{param.type}}</td>
                            <td>{{param.must}}</td>
                            <td>{{param.desc}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div v-if="api.reqExample">请求示例：</div>
                <div v-if="api.reqExample">{{api.reqExample}}</div>
                <div>返回值说明：</div>
                <div>
                    <table class="table">
                        <thead>
                        <tr>
                            <th>字段</th>
                            <th>类型</th>
                            <th>说明</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="param in api.apiResParameters">
                            <td><span v-show="param.space">--</span> {{param.name}}</td>
                            <td>{{param.type}}</td>
                            <td>{{param.desc}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div v-if="api.resExample">返回值示例：</div>
                <div v-if="api.resExample">{{api.resExample}}</div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="${contextPath}/static/vue/vue.min.js"></script>
<script src="${contextPath}/static/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script>
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        callback: {
            onClick: zTreeOnClick
        }
    };

    var app = new Vue({
        el: '#app',
        data: {
            api: ""
        }
    });


    $.ajax({
        dataType: "json",
        url: "${contextPath}/api/doc/tree",
        type: "post",
        data: {},
        success: function (result) {
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, result.data);
        }
    });

    function zTreeOnClick(event, treeId, treeNode) {
        $.ajax({
            type: "POST",
            url: "${contextPath}/api/doc/detail?url=" + treeNode.id,
            dataType: "json",
            success: function (json) {
                if (json.success) {
                    app.api = json.data;
                } else {
                    alert(json.msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("对不起，系统异常！");
            }
        });
    }

</script>
</html>
